<template>
  <div>
    <van-cell
      v-for="(item, index) in highlightSuggestions"
      :key="index"
      icon="search"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getSearchSuggestionsAPI } from '@/api'
import { debounce } from 'lodash'
//? 1. 动态正则
//? - 字面量 /aasdasd/ig
//? - enw RegExp(变量, 'ig')

//? 2. 字符串的replace
//? -  第一个参数可以是正则
//? -  第二个参数可以是函数， 函数的返回值是要替换的字符串
//? -  match: 正则匹配上的字符
/*
  'Auglar'.reeplace(/a/ig,function(match){
    return `<span>${match}</span>`
  })
*/
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      suggestions: []
    }
  },
  watch: {
    keywords: {
      //? 深度监视
      immediate: true,
      handler() {
        this.getSearchSuggestions()
      }
    }
  },
  computed: {
    //? map:映射 返回一个新数组，新数组的长度和原数组一样
    highlightSuggestions() {
      const reg = new RegExp(this.keywords, 'ig')

      return this.suggestions.map((str) =>
        str.replace(reg, (match) => `<span style="color:red">${match}</span>`)
      )
    }
  },
  methods: {
    //? 获取搜索建议
    //? 防抖
    //? 1.延迟执行
    //? 2. 干掉上一次的定时器
    //? clearTimeout(id)

    // getSearchSuggestions() {
    //   clearTimeout(this.id)
    //   this.id = setTimeout(async () => {
    //     try {
    //       const { data } = await getSearchSuggestionsAPI(this.keywords)

    //       this.suggestions = data.data.options
    //     } catch (error) {
    //       this.$toast.fail('获取建议失败')
    //     }
    //   }, 300)
    // }

    //? 处理搜索建议+防抖
    //? 单一职责原则
    getSearchSuggestions: debounce(async function () {
      try {
        const { data } = await getSearchSuggestionsAPI(this.keywords)

        //? this.suggestions = data.data.options.filter((str) => str !== null)
        //? 等价于以下代码 this.suggestions = data.data.options.filter((str)=>Boolean(str))
        this.suggestions = data.data.options.filter(Boolean)
      } catch (error) {
        this.$toast.fail('获取建议搜索失败')
      }
    }, 300)
  }
}
</script>

<style></style>
